<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义组件的两种方式</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>
        <my-world></my-world>
    </div>

    <script>
        /**
         * 方式1：先创建组件构造器，然后由组件构造器创建组件
         */
        //1.使用Vue.extend()创建一个组件构造器
        var MyComponent = Vue.extend({
           template : '<h3>Hello World</h3>'
        });

        //2.使用Vue.component(标签名，组件构造器)，根据组件构造器来来创建组件
        Vue.component('my-hello',MyComponent);


        /**
         * 方式2：直接创建组件（推荐）
         */
        Vue.component('my-world',{
            template: '<h1>你好，世界</h1>'
        });

        var vm = new Vue({ //这里的vm也是一个组件，称为根组件Root
            el : '#itany'
        });
    </script>
</body>
</html>